<template>
  <div class="stock-analysis">
    <el-row :gutter="20">
      <el-col :span="24">
        <market-status />
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="16">
        <popular-stocks />
      </el-col>
      <el-col :span="8">
        <market-news />
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="24">
        <el-card class="technical-analysis">
          <div slot="header">
            <span>技术分析</span>
          </div>
          <k-line-chart
            :stock-code="selectedStock.code"
            :stock-name="selectedStock.name"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MarketStatus from '@/components/market/MarketStatus.vue'
import PopularStocks from '@/components/market/PopularStocks.vue'
import MarketNews from '@/components/market/MarketNews.vue'
import KLineChart from '@/components/stock/KLineChart.vue'

export default {
  name: 'StockAnalysis',
  components: {
    MarketStatus,
    PopularStocks,
    MarketNews,
    KLineChart
  },
  data() {
    return {
      selectedStock: {
        code: '000001',
        name: '平安银行'
      }
    }
  }
}
</script>

<style scoped>
.stock-analysis {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.mt-20 {
  margin-top: 20px;
}

.technical-analysis {
  height: 600px;
}
</style> 